<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试订单接口 - 浏览器版</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
        h1 { color: #333; }
        .section { margin: 20px 0; padding: 20px; background: #f5f5f5; border-radius: 8px; }
        button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background: #1565c0; }
        pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; }
        .success { color: #4caf50; }
        .error { color: #f44336; }
    </style>
</head>
<body>
    <h1>订单接口测试工具 - 浏览器版</h1>
    
    <div class="section">
        <h2>1. 设置Token</h2>
        <p>由于后端服务未运行，需要先设置模拟Token:</p>
        <button id="setTokenBtn">设置模拟Token</button>
        <div id="tokenResult" class="success"></div>
    </div>
    
    <div class="section">
        <h2>2. 测试订单列表接口</h2>
        <p>点击下方按钮调用订单列表接口，查看完整响应数据:</p>
        <button id="testOrderBtn">测试订单接口</button>
        <div id="orderResult"></div>
    </div>
    
    <script>
        // 设置Token
        document.getElementById('setTokenBtn').addEventListener('click', function() {
            try {
                localStorage.setItem('token', 'mock-token-for-testing');
                document.getElementById('tokenResult').textContent = '✅ Token已成功设置！值为：mock-token-for-testing';
                console.log('Token已设置:', localStorage.getItem('token'));
            } catch (e) {
                document.getElementById('tokenResult').textContent = '❌ 设置Token失败：' + e.message;
                document.getElementById('tokenResult').className = 'error';
            }
        });
        
        // 测试订单接口
        document.getElementById('testOrderBtn').addEventListener('click', async function() {
            const resultDiv = document.getElementById('orderResult');
            resultDiv.innerHTML = '<p>正在请求订单数据...</p>';
            
            try {
                // 构建查询参数
                const queryParams = new URLSearchParams({
                    pageNum: 1,
                    pageSize: 10,
                    orderStatus: '',
                    userId: '1',
                    startTime: '',
                    endTime: '',
                    orderNo: ''
                });
                
                // 构建请求URL
                const url = `/order/list?${queryParams.toString()}`;
                console.log('请求URL:', url);
                
                // 获取token
                const token = localStorage.getItem('token');
                console.log('使用Token:', token);
                
                // 发送请求
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                console.log('响应状态码:', response.status);
                console.log('响应头:', response.headers);
                
                // 解析响应数据
                const data = await response.json();
                console.log('响应数据:', data);
                
                // 显示响应数据
                resultDiv.innerHTML = `
                    <p class="success">✅ 请求成功，状态码: ${response.status}</p>
                    <h3>响应数据详情:</h3>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                    <h3>数据结构分析:</h3>
                    <p>code: ${data.code}</p>
                    <p>data是否存在: ${data.data ? '是' : '否'}</p>
                    ${data.data ? `<p>records是否存在: ${data.data.records ? '是' : '否'}</p>` : ''}
                    ${data.data && data.data.records ? `<p>records数量: ${Array.isArray(data.data.records) ? data.data.records.length : 0}</p>` : ''}
                `;
                
            } catch (error) {
                console.error('请求失败:', error);
                resultDiv.innerHTML = `
                    <p class="error">❌ 请求失败</p>
                    <pre>${error.message}</pre>
                `;
            }
        });
        
        // 页面加载时检查token
        window.onload = function() {
            const token = localStorage.getItem('token');
            if (token) {
                document.getElementById('tokenResult').textContent = `当前已有Token: ${token}`;
            } else {
                document.getElementById('tokenResult').textContent = '尚未设置Token，请点击按钮设置';
                document.getElementById('tokenResult').className = 'error';
            }
        };
    </script>
</body>
</html>